import { useEffect, useState } from 'react'
import { Grid, Button, Tabs } from 'antd-mobile'
import { Spin } from 'antd'
import { useLocation } from 'react-router-dom'
import { getFeeSummary, getInFeeDetail, getInsuTradeInfo, recalcFee } from '@/api/fy.js'
import { message } from 'antd'

function Page(props) {
	const location = useLocation()
	const [loading, setLoading] = useState(true)
	const [item, setItem] = useState({})
	const [activeKey, setActiveKey] = useState('1')
	const [fyhzList, setFyhzList] = useState([])
	const [fyhzAllList, setFyhzAllList] = useState([])

	const [fymxList, setFymxList] = useState([])

	useEffect(() => {
		if (!location.state) {
			return
		}
		setItem(location.state)
		init(location.state)
	}, [])

	const init = params => {
		setLoading(true)
		const { MRN, SERIES } = params
		getFeeSummary({ 参数: [{ mrn: MRN, series: SERIES }] }).then(res => {
			const result = res.DATA || []
			result.map((l, i) => {
				l.key = i + 1
			})
			setFyhzList(result)
			clickLine({ MRN, SERIES }, true)
		})
	}

	const clickLine = (line, unClick) => {
		const { MRN, SERIES, INTERID, FTYPE } = line
		getInFeeDetail({ 参数: [{ mrn: MRN, series: SERIES, ftype: FTYPE, interid: INTERID }] }).then(res => {
			const result = res.DATA || []
			if (result.length > 0) {
				result.map((l, i) => {
					l.key = i + 1
				})
				setFymxList(result)
				if (!unClick) {
					setActiveKey('2')
				} else {
					setFyhzAllList(result)
				}
				setLoading(false)
			}
		})
	}

	const onFinish = () => {
		const { MRN, SERIES } = item
		const interid = fyhzList[0].INTERID
		getInsuTradeInfo({ 参数: [{ mrn: MRN, series: SERIES, tradetype: '0', interid }] }).then(res => {
			const result = res.DATA || []
			if (result.length === 0) {
				message.error('没有有效的医保信息')
				return
			}
			recalcFee({ 参数: [{ interid }] }).then(recalc_res => {
				console.log(recalc_res)
			})
		})
	}

	return (
		<div>
			<Spin spinning={loading}>
				<Tabs
					activeKey={activeKey}
					onChange={key => {
						if (key === '1') {
							setActiveKey(key)
						} else {
							const { MRN, SERIES } = item
							setLoading(true)
							clickLine({ MRN, SERIES })
						}
					}}
				>
					<Tabs.Tab title="费用汇总" key="1">
						<div>
							{fyhzList.map(line => (
								<div
									key={line.key}
									className="row"
									onClick={() => {
										setLoading(true)
										clickLine(line)
									}}
								>
									<div style={{ display: 'flex', padding: '5px 0 0 0' }}>
										<div style={{ padding: '0 10px', lineHeight: '26px', fontSize: '18px', fontWeight: 'bold' }}>
											{line.REMARK}
										</div>
									</div>
									<Grid columns={2} gap={8}>
										<Grid.Item style={{ textAlign: 'left', color: '#000' }}>
											<div>
												<span style={{ paddingRight: '5px', width: '90px' }}>费用:</span>
												<span
													style={{ width: '90px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}
												>
													{line.FEE}
												</span>
											</div>
										</Grid.Item>
										<Grid.Item style={{ textAlign: 'left', color: '#000' }}>
											<div>
												<span style={{ paddingRight: '5px', width: '90px' }}>自费:</span>
												<span
													style={{ width: '90px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}
												>
													{line.FEEZ}
												</span>
											</div>
										</Grid.Item>
									</Grid>
								</div>
							))}
						</div>
					</Tabs.Tab>
					<Tabs.Tab title="费用明细" key="2">
						<div>
							{fymxList.map(line => (
								<div key={line.key} className="row">
									<div style={{ display: 'flex', padding: '5px 0 0 0' }}>
										<div style={{ padding: '0 10px', lineHeight: '26px', fontSize: '18px', fontWeight: 'bold' }}>
											{line.REMARK}
										</div>
									</div>
									<Grid columns={2} gap={8}>
										<Grid.Item style={{ textAlign: 'left', color: '#000' }}>
											<div>
												<span style={{ paddingRight: '5px', width: '90px' }}>费用:</span>
												<span
													style={{
														width: '90px',
														whiteSpace: 'nowrap',
														textOverflow: 'ellipsis',
														overflow: 'hidden'
													}}
												>
													{line.FEE}
												</span>
											</div>
										</Grid.Item>
										<Grid.Item style={{ textAlign: 'left', color: '#000' }}>
											<div>
												<span style={{ paddingRight: '5px', width: '90px' }}>自费:</span>
												<span
													style={{
														width: '90px',
														whiteSpace: 'nowrap',
														textOverflow: 'ellipsis',
														overflow: 'hidden'
													}}
												>
													{line.FEEZ}
												</span>
											</div>
										</Grid.Item>
									</Grid>
								</div>
							))}
						</div>
					</Tabs.Tab>
				</Tabs>

				<Button block color="primary" size="large" onClick={() => onFinish()} style={{ margin: '15px 0' }}>
					结算
				</Button>
			</Spin>
		</div>
	)
}

export default Page
